<template>
  <view class="page">
    <!-- 自定义头部 -->
    <view :style="{ height: navBarHeight + 'px' }">
      <view
        :style="{
          height: menuHeight + 'px',
          'min-height': menuHeight + 'px',
          'line-height': menuHeight + 'px',
          left: menuRight + 'px',
          top: menuTop + 'px',
        }"
        class="head"
      >
        <image
          class="toBack"
          src="https://up.da-butler.com/uploads/images/20240429/181edb55196062b057d2b7c10de0fc94.png"
          @click="toBack"
        ></image>
        <view class="toBackText" @click="toBack">返回</view>
      </view>
    </view>
    <!-- 主播信息 -->
    <view class="headMain">
      <image
        class="headImage"
        src="https://app.test.da-butler.com/uploads/goods/20240517/1dd1ea3cc2647a1a47cf96379ec1df3b.jpg"
        mode="aspectFill"
      ></image>
      <view class="headContent">
        <view class="name">前程似锦</view>
        <view class="num">43.8w 本场点赞</view>
      </view>
    </view>
    <!-- 福袋抽奖 -->
    <view class="luckyBag">
      <image
        src="https://up.da-butler.com/uploads/images/20240725/306d5b8fa9729f8848db837e4e16ccdb.png"
        mode="aspectFill"
      ></image>
      <view class="luckyText">{{ minutesToTimeFormat(seconds) }}</view>
    </view>
    <!-- 直播播放器 -->
    <view class="videoMain">
      <video
        id="videoId"
        object-fit="cover"
        :autoplay="true"
        class="video-box"
        direction="90"
        :src="videoUrl"
        :enableHardwareDecode="true"
        :controls="false"
        :is-live="true"
        loop
        disable-gesture="true"
      ></video>
    </view>

    <!-- 发送信息 -->
    <view
      class="footer"
      :style="{
        position: 'fixed',
        bottom: focusType ? keyboardHeight : '',
        background: focusType ? '#ffffff' : '',
      }"
    >
      <view
        class="footerMain"
        v-if="!closeDanmuType"
        :style="{
          height: content.length > 30 && focusType ? '128rpx' : '88rpx',
          width: focusType ? '94%' : '60%',
        }"
      >
        <textarea
          class="footerNum"
          ref="myTextarea"
          v-model="content"
          placeholder="遵守文明，友善发言..."
          placeholder-class="textarea"
          :placeholder-style="'color: #FFFFFF;'"
          maxlength="100"
          :auto-blur="true"
          :adjust-position="false"
          cursorSpacing="24"
          :show-confirm-bar="false"
          :style="{
            width: focusType ? '73%' : '68%',
          }"
          @focus="focus"
          @blur="blur"
        />
        <view
          class="plBtn"
          v-if="content.length > 0"
          :style="{
            width: focusType ? '24%' : '30%',
          }"
          @click="sendOut"
          >发送</view
        >
      </view>
      <view class="clearImage" v-if="!focusType">
        <image
          @click="closeDanmu"
          v-if="!closeDanmuType"
          src="https://up.da-butler.com/uploads/images/20240713/31b932afa8cc3f30eba60917cd16eed5.png"
          mode="scaleToFill"
        />
        <image
          v-if="closeDanmuType"
          @click="openDanmu"
          src="https://up.da-butler.com/uploads/images/20240713/71429c658d22ed626af291576f4e28e5.png"
          mode="scaleToFill"
        />
      </view>
    </view>

    <view class="message">
      <scroll-view
        :style="{ height: scrollViewHeight + 'px' }"
        :scroll-y="true"
        :scroll-top="scrollTop"
        :scroll-with-animation="true"
        :scroll-y-bar="false"
        show-scrollbar
        class="scrollView"
      >
        <view id="scroll-view-content">
          <view class="remind" v-if="!remindType">{{ remind }}</view>
          <view class="main">
            <view
              class="plMaim"
              v-for="(item, index) in danmuData"
              :key="index"
              :style="{ width: computedWidth(item) + 'rpx' }"
            >
              <text class="myName">{{ item.name }}：</text>
              <text class="myPl">{{ item.content }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      navBarHeight: 0, // 导航栏高度
      menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
      menuTop: 0, // 胶囊距底部间距（保持底部间距一致）
      menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
      videoContext: uni.createVideoContext("videoId", this),
      remind:
        "欢迎来到房间!本平台严禁未成年人打赏。房间内严禁出现违法违规、低俗色情、吸烟酗酒、人身伤害等内容。如主播在房间互动过程中以不当方式诱导打赏、私下交易，请谨慎判断，以防人身财产损失。请大家注意财产安全，谨防网络诈骗。实际下载应用，请以明示信息为准",
      videoUrl:
        "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4",
      //抽奖
      seconds: 30,
      countdownInterval: null,

      //消息
      content: "",
      focusType: false,
      closeDanmuType: false,
      keyboardHeight: "",
      remindType: false,

      //滚动条位置
      scrollTop: 0,
      scrollViewHeight: 191, //滚动视图的高度

      //弹幕
      danmuData: [
        { name: "前程似锦1", content: "弹幕1" },
        { name: "前程似锦2", content: "弹幕2" },
        { name: "前程似锦3", content: "弹幕3" },
      ],
    };
  },

  computed: {},
  onLoad(options) {
    this.getStyle();
    this.startCountdown();
  },
  onUnload() {},
  onShow() {},
  methods: {
    getStyle() {
      const that = this;
      // 获取系统信息
      const systemInfo = uni.getSystemInfoSync();
      // 胶囊按钮位置信息
      const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
      // 导航栏高度 = 状态栏高度 + 44
      that.navBarHeight = systemInfo.statusBarHeight + 44;
      that.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
      that.menuTop = menuButtonInfo.top;
      that.menuHeight = menuButtonInfo.height;
      setTimeout(() => {
        this.remindType = true;
      }, 5000);
    },
    toBack() {
      uni.navigateBack({
        delta: 1, // 返回的页面数
      });
    },
    minutesToTimeFormat(minutes) {
      const hours = Math.floor(minutes / 60);
      const mins = minutes % 60;
      const formattedHours = ("0" + hours).slice(-2); // Ensure hours is always two digits
      const formattedMins = ("0" + mins).slice(-2); // Ensure minutes is always two digits
      return `${formattedHours}:${formattedMins}`;
    },
    startCountdown() {
      if (!this.countdownInterval) {
        this.countdownInterval = setInterval(() => {
          if (this.seconds > 0) {
            this.seconds--;
          } else {
            // 重新开始抽奖
            this.seconds = 30;
            this.startCountdown();
            //停止抽奖
            // this.stopCountdown();
          }
        }, 1000);
      }
    },
    stopCountdown() {
      clearInterval(this.countdownInterval);
      this.countdownInterval = null;
    },
    // 获取键盘高度
    focus() {
      this.focusType = true;
      //  监听键盘高度变化
      uni.onKeyboardHeightChange((obj) => {
        // 获取系统信息
        let _sysInfo = uni.getSystemInfoSync();
        let _heightDiff = _sysInfo.screenHeight - _sysInfo.windowHeight;
        let _diff = obj.height - _heightDiff;
        // 键盘高度
        this.keyboardHeight = (_diff > 0 ? _diff : 0) - 2 + "px";
      });
    },
    blur() {
      this.keyboardHeight = "";
      this.focusType = false;
    },
    closeDanmu() {
      this.closeDanmuType = true;
    },
    openDanmu() {
      this.closeDanmuType = false;
      this.scrollToBottom();
    },
    //根据内容自动滚动
    scrollToBottom() {
      this.$nextTick(() => {
        uni
          .createSelectorQuery()
          .in(this)
          .select("#scroll-view-content")
          .boundingClientRect((res) => {
            let top = res.height - this.scrollViewHeight;
            if (top > 0) {
              this.scrollTop = top;
            }
          })
          .exec();
      });
    },
    sendOut() {
      const list = {
        name: "发送弹幕名字",
        content: this.content,
      };
      this.danmuData.push(list);
      this.content=''
      this.scrollToBottom();
    },
    computedWidth(item) {
      const widthLength = item.content.length * 45 + 268;
      if (widthLength >= 588) {
        return 588;
      } else {
        return widthLength;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
}

.head {
  position: fixed;
  display: flex;
  flex-direction: row;
  align-items: center;
  z-index: 999;
  .toBack {
    width: 48rpx;
    height: 48rpx;
    position: relative;
    top: 4rpx;
    left: 6rpx;
  }
  .toBackText {
    width: 112rpx;
    color: #ffffff;
    font-size: 28rpx;
    position: relative;
    top: 4rpx;
    left: 16rpx;
  }
}
.videoMain {
  width: 100%;
  height: 101vh;
  position: fixed;
  top: 1rpx;
  z-index: 1;
  .video-box {
    width: 100%;
    height: 100%;
    border-radius: 24rpx;
  }
}
.headMain {
  display: flex;
  flex-direction: row;
  z-index: 99;
  position: absolute;
  background: rgba(0, 0, 0, 0.2);
  padding: 12rpx 32rpx 12rpx 12rpx;
  border-radius: 60rpx;
  left: 24rpx;
  align-items: center;
  .headImage {
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
  }
  .headContent {
    display: flex;
    flex-direction: column;
    position: relative;
    left: 8rpx;
    .name {
      font-size: 28rpx;
      color: #ffffff;
    }
    .num {
      font-size: 22rpx;
      color: #ffffff;
    }
  }
}
//左右摇摆
@keyframes shake {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
  75% {
    transform: rotate(-5deg);
  }
}
.luckyBag {
  width: 200rpx;
  height: 52rpx;
  position: absolute;
  margin-top: 168rpx;
  z-index: 99;
  left: 28rpx;
  animation: shake 2s ease-in-out infinite;
  transform-origin: 0% 0%;
  image {
    width: 94rpx;
    height: 94rpx;
  }
  .luckyText {
    font-weight: 400;
    font-size: 28rpx;
    color: #ffffff;
    line-height: 29rpx;
    text-align: right;
    position: absolute;
    top: 59rpx;
    left: 8rpx;
  }
}
.footer {
  display: flex;
  flex-direction: row;
  height: 158rpx;
  width: 100%;
  color: #ffffff;
  bottom: 0;
  z-index: 99;
  .footerMain {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    position: relative;
    top: 24rpx;
    left: 24rpx;
    color: #ffffff;
    border-radius: 40rpx;
    .footerNum {
      width: 73%;
      border-radius: 12rpx;
      padding: 38rpx 28rpx 28rpx 28rpx;
      color: #ffffff;
      height: 100%;
      overflow: auto;
    }
    .plBtn {
      color: #ffffff;
      background: linear-gradient(90deg, #af53f2 0%, #5988fa 100%);
      padding: 14rpx;
      border-radius: 40rpx;
      width: 24%;
      text-align: center;
      font-size: 32rpx;
    }
  }
  .clearImage {
    width: 224rpx;
    height: 72rpx;
    position: absolute;
    right: 24rpx;
    top: 32rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
}
/* 向上淡出start */
@keyframes fade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }

  from {
    transform: translate(0, 0);
  }

  to {
    transform: translate(0, -100rpx);
  }
}
.message {
  max-width: 645rpx;
  height: 369rpx; /* 设定最大高度 */
  overflow: visible; /* 不隐藏超出部分 */
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  z-index: 99;
  position: fixed;
  bottom: 178rpx;
  padding: 20rpx;
  left: 12rpx;
  .scrollView {
    overflow: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none; /* IE 和 Edge */
    overflow: -moz-scrollbars-none; /* Firefox */
    /* 隐藏滚动条 */
    -webkit-scrollbar {
      display: none;
    }
  }
  .main {
    display: flex;
    flex-direction: column;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    margin-bottom: 18rpx;
    .plMaim {
      padding: 8rpx 28rpx 12rpx 18rpx;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 40rpx;
      margin-bottom: 10rpx;
      transition: opacity 0.3s ease-in-out;
    }
    .myPl {
      font-size: 32rpx;
      color: #ffffff;
      line-height: 36rpx;
      padding: 8rpx;
    }
    .myName {
      font-size: 32rpx;
      color: #a1e5fc;
      line-height: 48rpx;
      padding: 8rpx 0 8rpx 8rpx;
      width: 188rpx;
    }
  }
}
.remind {
  animation-name: fade;
  /* 规定需要绑定到选择器的 keyframe 名称。。 */
  animation-duration: 5s;
  /* 规定完成动画所花费的时间，以秒或毫秒计。 */
  animation-timing-function: ease-out;
  /* 规定动画的速度曲线。 */
  animation-delay: 0.5s;
  /* 规定在动画开始之前的延迟。 */
  animation-iteration-count: forwards;
  // /* 规定动画应该播放的次数。forwards：一次   infinite：一直重复*/
  width: 588rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 30rpx;
  color: #a1e5fc;
  line-height: 38rpx;
  text-align: justify;
  font-style: normal;
  text-transform: none;
  margin-bottom: 10rpx;
  background: rgba(0, 0, 0, 0.2);
  padding: 24rpx;
  border-radius: 40rpx;
  z-index: 99;
  left: 12rpx;
}
</style>
